<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <style>
    .form-select {
      width: 103px;
      display: inline-block;
    }

    .col-form-label {
      text-align: right;
    }

    .figure-img {
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    #upload {
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1 class="p-5">个人设置</h1>
    <form class="col-4">
      <div class="row mb-3">
        <label class="col-form-label col-3">昵称：</label>
        <div class="col-9">
          <input class="form-control col-9" type="text" name="nickname" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">籍贯：</label>
        <div class="col-9">
          <select class="form-select col-4" name="province">
            <option value="">--省--</option>
          </select>
          <select class="form-select col-4" name="city">
            <option value="">--市--</option>
          </select>
          <select class="form-select col-4" name="area">
            <option value="">--区--</option>
          </select>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-form-label col-3">头像：</label>
        <div class="col-9">
          <input class="form-control col-9" type="hidden" name="avatar" />
          <figure class="figure">
            <input type="file" id="upload" />
            <img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
              class="figure-img img-fluid rounded" alt="..." />
            <figcaption class="figure-caption">修改头像</figcaption>
          </figure>
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-3"></label>
        <div class="col-9">
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 上传头像
    const upload = document.querySelector('#upload')
    const avatar = document.querySelector('.figure img')

    // 昵称
    const nickname = document.querySelector('[name=nickname]')

    // 省市区
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')


    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939


    // 功能列表
    // 功能1: 上传头像
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // 功能3: 省市区的联动效果
    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况

    // 要求：
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能

    // 功能1:上传头像
    // 注册点击图片模拟点击ipt效果
    avatar.addEventListener('click', () => {
      console.log('点击图片')
      upload.click()
    })
    // 配置根路径
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'
    // 文件框改变发起ajax请求
    upload.addEventListener('change', async function () {
      console.log('文件框改变')
      console.log(this.files)
      // 获取FormData上传所需文件信息
      const file = this.files[0]
      // 判断 file为undefined表示用户没有选择文件,后续代码不用执行
      if (!file) return
      // FormData格式上传
      const fd = new FormData()
      fd.append('avatar', file)
      // 发起ajax请求
      const { data: { data: { url } } } = await axios({
        method: 'POST',
        url: '/api/file',
        data: fd
      })
      console.log('文件路径', url)
      // 打印到页面
      avatar.src = url
    })

      // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
      ; (async () => {
        const { data: { data: userData } } = await axios({ url: '/api/settings' })
        console.log('个人信息', userData)
        // 打印到页面
        nickname.value = userData.nickname
        province.value = userData.province
        city.innerHTML = `<option value="">${userData.city}</option>`
        area.innerHTML = `<option value="">${userData.area}</option>`
        avatar.src = userData.avatar
      })()

      // 功能3: 省市区的联动效果
      ; (async () => {
        // ❤️ ============ 获取省份数据 ================== ❤️
        // 解构获取省份数据对象
        const { data: { data: provinceData } } = await axios.get('/api/province')
        console.log('省份数组', provinceData)
        // 渲染数据到页面
        const provinceStr = provinceData.map(item => `<option value="${item}">${item}</option>`).join('')
        province.innerHTML = '<option value="">--省--</option>' + provinceStr

      })()

    // 省改变市也改变
    province.addEventListener('change', async function () {
      console.log('省变了')
      const { data: { data: cityData } } = await axios({
        url: '/api/city',
        params: {
          pname: this.value
        }
      })
      console.log(cityData)
      const cityStr = cityData.map(item => `<option value="${item}">${item}</option>`).join('')
      city.innerHTML = '<option value="">--市--</option>' + cityStr
      area.innerHTML = '<option value="">--区--</option>'
    })
    // 市改变区也改变
    city.addEventListener('change', async function () {
      console.log('市变了')
      const { data: { data: areaData } } = await axios({
        url: '/api/area',
        params: {
          pname: province.value,
          cname: this.value
        }
      })
      console.log(areaData)
      const areaStr = areaData.map(item => `<option value="${item}">${item}</option>`).join('')
      area.innerHTML = '<option value="">--区--</option>' + areaStr
    })

    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    document.querySelector('.btn').addEventListener('click', async (e) => {
      e.preventDefault()
      console.log('点击btn')
      const { data: { data: userData } } = await axios({ url: '/api/settings' })
      console.log('个人信息', userData)
          const res = await axios({
            method: 'PUT',
            url: '/api/settings',
            data: {
              nickname: nickname.value,
              province: province.value,
              // ⭐ 刷新页面未选择省市的情况下 市和区 获取不到value值，以用户信息获取的值作为 参数保存上传
              city: city.value || userData.city,
              area: area.value || userData.area,
              avatar: avatar.src
            }
          })
          console.log('保存信息', res)
    
    })



      // 方法2 单独put方法
      // axios.put(url[, data[, config]])
      // ; (async () => {
      //   const res = await axios.put(
      //     '/api/settings',
      //     {
      //       nickname: nickname.value,
      //       province: province.value,
      //       city: city.value,
      //       area: area.value,
      //       avatar: avatar.src
      //     }
      //   )
      //   console.log('保存信息', res)
      // })()
  </script>
</body>

</html>